<template>
  <view class="container">
    <view class="tip-content">
      <view>
        <text class="symbol">*</text> <text class="content">密码必须包含数字、字母，数字字母组合最少包含一个字母</text>
      </view>
      <view>
        <text class="symbol">*</text> <text class="content">密码长度为 6-14 位</text>
      </view>
    </view>

    <view class="passwdInput">
      <text>原密码: </text>
      <view class="input">
        <u--input placeholder="请输入原密码" border="surround" v-model="oldPasswd" @change="oldPasswdVerify" type="password"
          prefixIcon="bag-fill" prefixIconStyle="font-size: 22px;color: #909399" :customStyle="inputStyle"></u--input>
      </view>
      <text v-show="oldPasswdTip" class="passwdTip">密码长度必须为 6-14 位</text>
    </view>

    <view class="passwdInput">
      <text>新密码: </text>
      <view class="input">
        <u--input placeholder="请输入新密码" border="surround" v-model="newPasswd" @change="newPasswdVerify" type="password"
          prefixIcon="bag-fill" prefixIconStyle="font-size: 22px;color: #000" :customStyle="inputStyle" @blur="verifyPasswd"></u--input>
      </view>
      <text v-show="newPasswdTip" class="passwdTip">密码长度必须为 6-14 位</text>
      <br />
      <text v-show="verifyTip" class="passwdTip">新旧密码不一样</text>
    </view>

    <view class="commit-btn">
      <u-button type="success" text="提交" @click="submitPasswd"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        oldPasswd: "",
        newPasswd: "",
        oldPasswdTip: false,
        newPasswdTip: false,
        verifyTip: false,
        // 修改 u--input 输入框样式
        inputStyle: {
          backgroundColor: "#fff",
          borderRadius: '40rpx',
          fontSize: '28rpx',
          fontWeight: '400',
          color: '#FFFFFF',
          lineHeight: '40rpx',
          border: 'none',
        }
      };
    },
    methods: {
      // 新旧密码验证长度
      oldPasswdVerify(value) {
        if (value.length < 6 || value.length > 14) {
          this.oldPasswdTip = true;
        } else {
          this.oldPasswdTip = false;
        }
      },
      newPasswdVerify(value) {
        if (value.length < 6 || value.length > 14) {
          this.newPasswdTip = true;
        } else {
          this.newPasswdTip = false;
        }
      },
      // 校验新旧密码
      verifyPasswd(value) {
        // 是否长度相同，是否一样
        if(this.oldPasswd.length !== this.newPasswd.length) {
          this.verifyTip = true;
          return;
        }
        // 对密码内容进行校验
        let tag = 0;
        for(let i = 0; i < this.oldPasswd.length; i++) {
          if(this.oldPasswd[i] !== this.newPasswd[i]){
            tag++;
          }
        }
        if(tag !== 0){
          this.verifyTip = true;
        } else {
          // 若前两步都相同，则可恢复状态
          this.verifyTip = false
        }
      },
      // 提交密码
      submitPasswd() {
        if(this.verifyTip === false) {
          console.log("密码提交成功");
        } else {
          console.log("密码提交失败");
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 100rpx;

    .tip-content {
      height: 80rpx;
      font-size: 24rpx;

      .symbol {
        color: red;

      }

      .content {
        color: #909399;
        margin-left: 10rpx;
      }
    }

    .passwdInput {
      width: 600rpx;
      margin-bottom: 20rpx;
      margin-top: 30rpx;

      .input {
        margin-top: 20rpx;
      }
      
      .passwdTip {
        color: red;
        font-size: 24rpx;
      }
    }

    .commit-btn {
      width: 400rpx;
      margin: 0 auto;
      margin-top: 80rpx;
    }
  }
</style>
